<template>
	<view>
		<image src="../../static/myImage/sign.png" mode="" class="bg_img"></image>
		<view class="container">
			<view class="top">
				<u-icon name="arrow-left" size="30" @click="back"></u-icon>
				<view class="title">签到</view>
			</view>
			<view class="sign_box">
				<view>连续签到 {{ count }} 天</view>
				<text @click="signIn">签到</text>
			</view>
			<u-toast ref="uToast" />
			<view class="date_box">
				<view class="calendar-box">
					<!-- 日历主体 -->
					<view class="calendar">
						<view class="header">
							<view v-for="(item, index) in date" :key="index" class="">
								{{ item }}
								<view></view>
							</view>
						</view>
				
						<view class="date-box">
							<view v-for="(item, index) in dateArr" :key="index">
								<view class="">
									<view class="date-head" :data-year="year" :data-month="month" :data-datenum="item.dateNum">
										<text>{{ item.dateNum }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			count: 0,
			date: ['日', '一', '二', '三', '四', '五', '六'],
			dateArr: [],
			year: 0,
			month: 0,
			isToday: 0,
			isTodayWeek: false,
			todayIndex: 0
		};
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		signIn() {
			console.log('签到');

			this.$refs.uToast.show({
				title: '签到成功，获得10积分',
				type: 'error',
				icon: false
			});
		},
		dateInit: function(setYear, setMonth) {
			//全部时间的月份都是按0~11基准，显示月份才+1
			let dateArr = []; //需要遍历的日历数组数据
			let arrLen = 0; //dateArr的数组长度
			let now = setYear ? new Date(setYear, setMonth) : new Date();
			let year = setYear || now.getFullYear();
			let nextYear = 0;
			let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
			let nextMonth = month + 1 > 11 ? 1 : month + 1;
			let startWeek = new Date(year + ',' + (month + 1) + ',' + 1).getDay(); //目标月1号对应的星期
			let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
			let obj = {};
			let num = 0;
			if (month + 1 > 11) {
				nextYear = year + 1;
				dayNums = new Date(nextYear, nextMonth, 0).getDate();
			}
			arrLen = startWeek + dayNums;
			for (let i = 0; i < arrLen; i++) {
				if (i >= startWeek) {
					num = i - startWeek + 1;
					obj = {
						isToday: '' + year + (month + 1) + num,
						dateNum: num,
						signIn: false
					};
				} else {
					obj = {};
				}
				dateArr[i] = obj;
			}
			this.dateArr = dateArr;
			let nowDate = new Date();
			let nowYear = nowDate.getFullYear();
			let nowMonth = nowDate.getMonth() + 1;
			let nowWeek = nowDate.getDay();
			let getYear = setYear || nowYear;
			let getMonth = setMonth >= 0 ? setMonth + 1 : nowMonth;
			if (nowYear == getYear && nowMonth == getMonth) {
				this.isTodayWeek = true;
				this.todayIndex = nowWeek;
			} else {
				this.isTodayWeek = false;
				this.todayIndex = -1;
			}
			// console.log(this.data.dateArr);
		}
	},
	onLoad() {
		let now = new Date();
		let year = now.getFullYear();
		let month = now.getMonth() + 1;
		this.dateInit();
	}
};
</script>

<style lang="scss" scoped>
.bg_img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 621upx;
}
.container {
	position: relative;
	.top {
		display: flex;
		align-items: center;
		padding-top: 70upx;
		padding-left: 30upx;
		color: #ffffff;
		margin-bottom: 120upx;
		.title {
			flex: 1;
			text-align: center;
			font-size: 34upx;
			padding-right: 60upx;
		}
	}
	.sign_box {
		padding-left: 80upx;
		color: #ffffff;
		margin-bottom: 100upx;
		view {
			font-size: 32upx;
			margin-bottom: 50upx;
		}
		text {
			padding: 12upx 50upx;
			font-size: 30upx;
			border: 2upx solid #ffffff;
			border-radius: 100upx;
		}
	}
}

.date_box {
	padding: 0 30upx 30upx 30upx;
}

/* ---日历--- */
.calendar-box {
	width: 100%;
	background: none;
	border-radius: 20upx;
	box-sizing: border-box;
	padding: 30upx;
	border: 2upx solid #FF8F89;
	font-size: 28upx;
}

.calendar_title {
	/* width: 70%; */
	margin: 10upx auto;
	justify-content: space-between;
	font-size: 34upx;
	color: #111;
	border-bottom: 1px solid #d0d0d0;
}

/* 日历 */
.calendar {
	width: 100%;
}

.header {
	font-size: 0;
	background: #E85A53;
	border-radius: 50upx;
}

.header > view {
	display: inline-block;
	width: 14.285%;
	color: #FFFFFF;
	font-size: 28upx;
	text-align: center;
	padding: 12upx 35upx;
}

.weekMark {
	position: relative;
}

.weekMark view {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.date-box {
	font-size: 0;
	padding: 10upx 0;
	margin-top: 20upx;
}

.date-box > view {
	position: relative;
	display: inline-block;
	width: 14.285%;
	text-align: center;
	vertical-align: middle;
}

.date-head {
	width: 44upx;
	height: 44upx;
	line-height: 44upx;
	font-size: 28upx;
	border-radius: 50%;
	background: #e6e6e6;
	color: #aaaaaa;
	margin: 0 auto 30upx auto;
}

.nowDay .date-head {
	width: 100upx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.is_sign {
	background-color: #E85A53;
	color: #FFFFFF;
}

</style>

<style>
page {
	background: #f7f7f7;
}
</style>
